{% load i18n %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{% trans '登录' %}</title>
    <link href="/static/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/static/bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/static/css/login.css" rel="stylesheet"/>
</head>
<body ng-app="app">
<div class="container" ng-controller="UserLogin">
    <div class="wrapper">
        <div class="widget widget-heading-simple widget-body-gray">
            <div class="widget-body">
                <div class="widget-footer">
                    <p ng-show="error" class="error">
                        <button ng-click="close()" type="button" class="close" data-dismiss="alert">×</button>
                        {[error]}
                    </p>
                </div>
                <form name='form'>
                    {% csrf_token %}
{#                    <input type="text" class="input-block-level" id='IdUserName' required name="username" placeholder="Username">#}
{#                    <input type="password" class="input-block-level margin-none" required name="password" id="IdPassword" placeholder="Password">#}
                    <div class="input-group">
                      <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
                      <input class="form-control" required type="text" ng-model="username" placeholder="Username">
                    </div>
                    <br/>
                    <div class="input-group">
                      <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
                      <input class="form-control" required type="password" ng-model="password" placeholder="Password">
                    </div>
                    <br/>
                    <div class="row-fluid">
                        <div class="span4 center">
                            <button id="IdLoginBtn" class="btn btn-block btn-inverse btn-primary" ng-click="login()"
                                    ng-disabled="loading" type="submit">{[loginText]}</button>
                            <input type='hidden' name="next" value="/" />
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


{#<script src="/static/bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>#}
<script src="/static/lib/angular/angular.min.js" type="text/javascript"></script>
{#<script src="/static/bower_components/angular-resource/angular-resource.min.js" type="text/javascript"></script>#}
{#<script src="/static/js/config.js" type="text/javascript"></script>#}
<script type="text/javascript">
    angular.module('Base',[]).config(['$interpolateProvider',function($interpolateProvider){
        $interpolateProvider.startSymbol('{[');
        $interpolateProvider.endSymbol(']}');
    }]);
    var app = angular.module('app',['Base']);
    function UserLogin($scope, $http){
        $scope.loginText = '{% trans 'Sing in' %}';
        $scope.login=function(){
            $scope.user={password:$scope.password,username:$scope.username}
            $scope.loading=true;
            $scope.loginText = '{% trans '验证中...' %}';
            $scope.user['type']='login';
            $http.post('/api/v1/user/login/', $scope.user).success(function(data){
                if(data.success === true){
                    location.href='/';
                    $scope.loginText='{% trans '验证通过,页面重定向..' %}';
                }else{
                    $scope.error=data.reason;
                    $scope.loginText = '{% trans '登陆' %}';
                };
                 $scope.loading=false;
            }).error(function(data){
                $scope.error=data.reason;
                $scope.loginText = '{% trans '登陆' %}';
                $scope.loading=false;
            });
        }
        $scope.close= function(){
            $scope.loading=false;
            $scope.error='';
        };
    }
</script>
</body>
</html>